<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自选指标管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <!-- <link rel="stylesheet" href="../Resources/css/mui.css"> -->
    <link rel="stylesheet" href="/Resources/2.0/css/public.css">
    <script src="/Resources/2.0/js/size.js"></script>



</head>

<body>
    <div class="aim flexall" id="app">
        <div class="fixed-header">
            <table class="aim-table aim-table-default">
                <thead>
                    <tr>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">选择</div>
                        </th>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">指标名称</div>
                        </th>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">置顶</div>
                        </th>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">排序</div>
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="flex scroll-body">
            <table class="aim-table aim-table-default">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>指标名称</th>
                        <th>置顶</th>
                        <th>排序</th>
                    </tr>
                </thead>
                <tbody id="drag-list">
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比1
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比3
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比4
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比5
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比5
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比5
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比5
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比5
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-totop">
                                <i class="icon icon-totop"></i>
                            </div>
                        </td>
                        <td>
                            <div class="toggle-handle toggle-sort">
                                <i class="icon icon-sort"></i>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="aim-bottom-btn">
            <a href="javascript:;" class="btn-operate btn-solid btn-all">
                全 选
            </a>
            <a href="javascript:;" class="btn-operate btn-active btn-del">
                删 除
            </a>
        </div>

    </div>


    <script src="/Resources/2.0/js/zepto.js"></script>
    <script src="/Resources/2.0/js/mui.min.js"></script>
    <script src="/Resources/2.0/js/sortable.js"></script>
    <script src="/Resources/2.0/js/zepto.animate.basic.js"></script>
    <script src="/Resources/2.0/js/zepto.animate.js"></script>
    <script src="/Resources/2.0/js/public.js"></script>

    <script>
        // 单选
        mui('.aim-table').on('tap', '.toggle-radio', function () {
            Zepto(this).find('.icon-radio').toggleClass('active')
            Zepto(this).closest('tr').toggleClass('active');
            var _length = Zepto('.aim-table .icon-radio.active').length;
            var sum = Zepto('.aim-table .icon-radio').length
            var all = Zepto('.aim-bottom-btn .btn-all')
            if (_length >= sum) {
                all.html('取消全选').addClass('active')
            } else {
                all.html('全 选').removeClass('active')

            }
        })
        // 全选
        mui('.aim-bottom-btn').on('tap', '.btn-all', function () {
            var aim = Zepto('.aim-table .icon-radio')
            var aimtr = Zepto('.aim-table tbody tr')
            Zepto(this).toggleClass('active');
            if (Zepto(this).hasClass('active')) {
                Zepto(this).html('取消全选')
                aim.addClass('active')
                aimtr.addClass('active')
            } else {
                Zepto(this).html('全 选')
                aim.removeClass('active')
                aimtr.removeClass('active')
            }
        })

        // 删除
        mui('.aim-bottom-btn').on('tap', '.btn-del', function () {
            Zepto('.aim-table tbody tr.active').fadeOut(function () {
                Zepto(this).remove()
            })
        })
        // 置顶
        mui('.aim-table').on('tap', '.toggle-totop', function () {
            var aim = Zepto(this).closest('tr')
            if(aim.index()){
                var clone = aim.clone().css({
                'opacity': 0,
                'display': 'none'
            })
            aim.fadeOut(function () {
                Zepto(this).remove()
                Zepto('.aim-table tbody').prepend(clone)
                clone.fadeIn()
            });
            }
           

        })
        // 拖拽排序
        var el = document.getElementById('drag-list');
        var sortable = Sortable.create(el, {
            handle: ".toggle-sort",
            animation: 200
        });
    </script>


</body>


</html>